import React from 'react'
import {BrowserRouter,Navigate,useRoutes} from 'react-router'
const Home=React.lazy(()=>import('../page/Home/index.tsx'))
const Characters=React.lazy(()=>import('../page/Characters/index.tsx'))
const Arithmetic=React.lazy(()=>import('../page/Arithmetic/index.tsx'))
const routers=[
    {
        path:'/',
        element:<Navigate to='/home'/>
    },
    {
        path:'/home',
        element:<Home/>
    },
    {
        path:'/characters',
        element:<Characters/>
    },
    {
        path:'/arithmetic',
        element:<Arithmetic/>
    }
]

function WrapperRouters(){
    //useRotes钩子只能用在路由组件中，不能单独抛出
    // 直接return <BrowserRouter>{ele}</BrowserRouter>不行，需要用路由组件包裹后返回
    let ele=useRoutes(routers)
    //返回<Routes></Routes>内包含如<Route path="/" element={<Navigate to="/noteClass" />} />的元素
    return ele
}
export default function WrapperRouter(){
    return (
        <BrowserRouter>
            <WrapperRouters/>
        </BrowserRouter>
    )
}